<template>
	<view class="storageDetails">
		<Login></Login>
		<view class="searchpage" style="padding: 66rpx 38rpx 0 40rpx; box-sizing: border-box">
			<div style="display: flex; justify-content: space-between;">
				<div class="searchpage-top" style="font-size: 30rpx; font-weight: 600;">
					<input type="text" value="" placeholder="物品名称" v-model="goodsList.goodsName" />
				</div>
				<div class="searchpage-top">
					<input type="text" value="" placeholder="类型" v-model="goodsList.goodsIntroduce" />
				</div>
				<div style="text-align: right; ">
					<text class="text1" @click="detailGoods">删除</text>
						<text class="text1" @click="saveGoods">保存</text>
					<text class="text2" @click="toStorageBox">返回</text>
				</div>
			</div>
			<view class="" style="width: 600rpx;display: flex;justify-content: space-between;box-sizing: border-box; padding-top: 42rpx; ">
				<swiper class="swiper" navigation :indicator-dots="true" :autoplay="true" :interval="2500" :duration="1000">
					<swiper-item v-for="(item,index) in imageUrl" :key="index">
						<view class="swiper-item">
							<image :src=item mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="" style="margin-top: 60rpx; height: 70rpx; display: flex;justify-content: center;">
				<view class="look" style="" @click="replaceImage">
					<text>更换图片</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BaseUrl from "../../utlis/api.js"
	import Login from "../../common/login/login.vue";
	import fmt from "../../utlis/fmt.js"
	export default {
		components: {
			Login
		},
		data() {
			return {
				goodsList: null, //物品数据
				imageUrl: [],
				goodsData:{
					goodsName: null, //物品名称
					goodsIntroduce: null, //物品类型
					boxId: null,
					timer: null,
					Image:[]
				}
			}
		},
		onLoad(option) {
			if(option){
				this.goodsList = JSON.parse(option.params);
				this.imageUrl.push(this.goodsList.goodsImage)
			}
		},
		methods: {
			detailGoods() {
				console.log(this.goodsList)
				const goodsIds=this.goodsList.goodsId
				const token = wx.getStorageSync('token') || [];
				uni.request({
					url: BaseUrl+"/wx/sbox/goods/"+goodsIds,
					method: 'DELETE',
					header: {
						"Authorization": "Bearer " + token,
					},
					success: (res) => {
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 上一页
						uni.navigateBack({
							success: function() {
								beforePage.onLoad(); // 执行上一页的onLoad方法
							}
						});
					}
				})
			},
			// 替换图片 replaceImage
			replaceImage(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        // 获取的格式是数组，多选会同时返回，单选只返回一项
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
				        // 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
						const token = wx.getStorageSync('token') || [];
				        uni.uploadFile({
				            url: BaseUrl+'/common/upload', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'imageUrl'  // 上传附带参数
				            },
							header: {
								"Authorization": "Bearer " + token,
							},
				            success: (res) => {
								res.data=JSON.parse(res.data)
								if(res.data.code!==200){
									return uni.showToast({
										title:res.data.msg,
										icon:Error
									})
								}
								this.imageUrl=[]
								this.imageUrl.push(res.data.url)								
								console.log(this.imageUrl)
				            }
				        });
				    }
				});
			},
			// 保存物品 saveGoods
			saveGoods(){
				console.log(this.goodsList.goodsId)
				if (this.goodsList.goodsName) {
					const token = wx.getStorageSync('token') || [];
					const timer = new Date().format("yyyy-MM-dd hh:mm:ss"); //创建时间
					this.goodsData.goodsId = this.goodsList.goodsId//物品盒子ID
					this.goodsData.goodsIntroduce = this.goodsList.goodsIntroduce
					this.goodsData.goodsImage=this.imageUrl.toString()
					this.goodsData.timer = timer;
					this.goodsData.goodsName=this.goodsList.goodsName
					uni.request({
						url: BaseUrl+"/wx/sbox/goods",
						method: 'PUT',
						data: this.goodsData,
						header: {
							"Authorization": "Bearer " + token,
						},
						success: (res) => {
							console.log(res)
							uni.showToast({
								title: res.data.msg
							});
						}
					})
				} else {
					uni.showToast({
						title: "请输入名称"
					});
				}
			},
			// toStorageBox 返回箱子
			toStorageBox(){
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 上一页
				uni.navigateBack({
					success: function() {
						beforePage.onLoad(); // 执行上一页的onLoad方法
					}
				});
			}
		}
	}
</script>

<style>
	.storageDetails {
		width: 100%;
		height: 100%;
		background-color: #c3b18b;
	}

	.searchpage {
		width: 100%;
		height: 100%;
		background-color: #f9f7f2;
		border-radius: 20rpx;
	}

	.searchpage-top {
		width: 33%;
		height: 25px;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 26px;
		color: #000000;
		opacity: 0.7;
	}

	.text1 {
		width: 24px;
		height: 17px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 26px;
		color: #000000;
		opacity: 0.6;
		margin-right: 20rpx;
	}

	.text2 {
		width: 48px;
		height: 17px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 26px;
		color: #000000;
		opacity: 0.6;
	}

	.weui-cells {
		display: inline-block;
		width: 254px;
		height: 32px;
		border: 1px solid #000;
		opacity: 0.3;
		border-radius: 10px;
	}

	.mini-btn {
		width: 61px;
		height: 32px;
		margin-top: 70rpx;
		background: #ffcf00;
		opacity: 1;
		border-radius: 10px;
	}

	.whitebg {
		whitebgwidth: 120px;
		height: 40px;
		background: #fff;
		opacity: 0.9;
		border-radius: 10px;
		font-weight: 800;
		line-height: 52rpx;
		color: #000000;
		font-size: 24rpx;
		box-sizing: border-box;
		padding: 15rpx;
	}

	.swiper {
		width: 100%;
		height: 300rpx;
	}

	.look {
		width: 270rpx;
		height: 100%;
		background: #FFCF00;
		opacity: 1;
		border-radius: 36rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 70rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.icon {
		color: #FFCF00;
	}

	.icon1 {
		color: #707070;
		font-size: 60rpx;
	}

	.testt {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 26px;
		color: #000000;
		opacity: 1;
	}
</style>
